<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 一行 -->
 <el-form :inline="true" :model="fromlist" class="demo-form-inline" ref="qc" style="width:100vm">
  <el-form-item label="标签名称"  prop="input">
            <el-input
              v-model="fromlist.input"
              placeholder=""
            ></el-input>
          </el-form-item>
          <!-- 状态搜索 -->
          <el-form-item label="状态"  prop="select">
            <el-select v-model="fromlist.select" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <!-- 清除按钮 -->
          <el-form-item class="iid">
            <el-button @click="qingchu" class="qingchu">清除</el-button>
            <!-- 搜索按钮 -->
            <el-button type="primary" @click="sousuo" class="sousuo">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button
                type="text"
                @click="tiaozhuan"
                title="返回学科"
                class="back"
                v-if="this.$route.query.id != undefined"
              >
                <i class="el-icon-back"></i>
                返回学科
              </el-button>
      </el-form-item>
  <el-form-item>
      <el-button size="small" icon="el-icon-edit" class="xinzeng"  @click="addTan">新增标签</el-button>
       </el-form-item>
       </el-form>
<!-- 二行 -->
  <el-col :span="24"><div class="el-icon-info1"><i class="el-icon-info"></i>   数据一共 {{total}}条</div></el-col>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
       type="index"
    prop="id"
        label="序号"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180">
      </el-table-column>
        <el-table-column
        prop="tagName"
        label="标签名称"
        width="180">
      </el-table-column>
        <el-table-column
        prop="username"
        label="创建者"
        width="180">
      </el-table-column>
        <el-table-column
        prop="addDate"
        label="创建日期"
        width="180">
          <template #default="{ row }">
            {{fromTime(row.addDate)}}
          </template>
      </el-table-column>
        <el-table-column
        prop="state"
        label="状态"
        width="180">
         <template #default="{ row }">
            {{row.state===1?'启用':'禁用'}}
            </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
           <template #default="{row}">
  <el-button type="text" width="100%" @click="jinyong(row)">{{row.state===1?'禁用':'启用'}}</el-button>
<el-button type="text" width="100%" @click="xiugai(row)" :disabled="row.state===1">修改</el-button>
  <el-button type="text" width="100%" @click="open(row.id)" :disabled="row.state===1">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
<!-- 完整分页：current-page 当前页码-->
      <!--          page-size：每页多少条 -->
      <!--          page-sizes：每页可以选择的条数 -->
      <!--          layout：分页显示功能 -->
    <div class="pager" style="margin:10px; display:flex; justify-content:flex-end">
      <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20,50]"
        layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      >
      </el-pagination>
    </div>
      </el-card>

      <aDa :show-dialog.sync="showDialog" ref="aDa"></aDa>
    </div>
  </div>
</template>

<script>
import aDa from '../components/tags-add.vue'
import dayjs from 'dayjs'
// import { status } from '@/api/hmmm/constants.js'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      fromlist: {
        // 输入
        input: '',
        // 下拉
        select: ''
      },
      // 数据
      tableData: [],
      page: 1,
      pageSize: 10,
      subjectName: '',
      id: '',
      subjectID: '',
      //  共多少信息
      total: 0,
      form: {

      },
      //  弹窗
      showDialog: false,
      showTitle: '新增',
      obj: {
        tagName: '',
        state: ''
      },
      // 接受传过来的值
      chuan: {
        idd: '',
        name: ''
      }
    }
  },
  components: {
    aDa
  },
  created () {
    // 数列
    this.xuan()
  },
  methods: {
  // 获取列表数据
    async getList () {
      const num = {
        page: this.page,
        pagesize: this.pageSize
      }
      const { data } = await list(num)
      //  console.log(res);
      // console.log(data);
      this.tableData = data.items
      this.total = data.counts
    },
    // 搜索
    async sousuo () {
      if (this.fromlist.select === '禁用') {
        this.fromlist.select = 0
      } else if (this.fromlist.select === '启用') {
        this.fromlist.select = 1
      }
      const { data } = await list({ tagName: this.fromlist.input, state: this.fromlist.select })
      // console.log(data)
      this.tableData = data.items
      this.total = data.items.length
      // this.$refs.qc.resetFields()
    },
    // 枚举/*3
    // status (data) {
    //   if (data.state === 1) {
    //     return '已启用'
    //   } else if (data.state === 0) {
    //     return '已禁用'
    //   }
    // },
    fromTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 清除
    qingchu () {
      this.$refs.qc.resetFields()
      this.getList()
    },

    //   /**
    //  * 计算索引
    //  */
    // indexMethod(index) {
    //   return (this.page - 1) * this.size + index + 1
    // },
    // 页容量
    handleSizeChange (val) {
      // console.log(val);
      this.pageSize = val
      this.page = 1
      this.getList()
    },
    //  页码变化
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    tiaozhuan () {
      this.$router.push('./list')
    },

    // 点击删除后出现的弹框
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id);
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({

          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
    * 展示弹层
    */
    async addTan () {
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
    },

    // 修改
    xiugai (row) {
      this.showDialog = true
      // console.log(row)
      this.form = row

      this.$refs.aDa.huixian(row)
      this.getList()
    },
    // 禁用
    async jinyong (row) {
      // console.log(row)
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })

      this.$message.success('操作成功')

      row.state = row.state === 1 ? 0 : 1
    },
    async xuan () {
      // 拿路由传过来的id 和 name
      this.chuan.idd = this.$route.query.id
      // console.log(this.chuan.idd)
      // console.log(this.chuan.name)
      console.log(this.chuan.idd)
      if (this.chuan.idd) {
        const { data } = await list({ page: this.page, pagesize: this.pageSize, subjectID: this.chuan.idd })
        console.log(data)
        this.tableData = data.items
        this.total = data.counts
      } else {
        this.getList()
      }
    }
  }

}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
    .bg-purple-dark {
     background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 6px;
    min-height: 36px;
    font-size: 14px;
    font-weight:bold;
    color:#606266;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-input{
    width: 200px;
  }
  .qingchu{
   margin-left: 15px;
  }
  .sousuo{
background-color: #409eff;
color:azure
  }
  .xinzeng{
    margin-left:-80px;
    background-color: #67c23a;
    color:azure;
  }
  .el-icon-info1{
    width: 100%;
    height: 34px;
    padding-top: 8px;
   background-color:#f4f4f5;
   color: #909399;
   font-size: 13px;
   padding-left: 20px;
  }
  .el-icon-info{
    font-size: 16px;
  }
  .shuang{
        font-weight:bold;
           width: 300px;
  }
.iid{
  width: 400px;
}
.back{
  width: 200px;
}
.el-page-header {
    display: flex;
    line-height: 36px;
}
.el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 21px;
    vertical-align: top;
}
</style>
